<script setup>
  // 引入多个 .vue 组件
  import {ref} from 'vue'
  import Header from './components/Header.vue'
  import Navigator from './components/Navigator.vue'
  import Content from './components/Content.vue'

  // 1. 定义响应式变量存储接收的数据
  let menu = ref("")
  // 2. 定义接收方法，更新 menu 的值
  function receiver(data) {
    menu.value = data // data 就是子组件传递过来的数据 
  }
</script>

<template>
  <div>
    {{menu}}
    <Header class = "header"></Header>
    <!-- 3. 在模板中监听子组件的 sendMenu事件，绑定接收方法 -->
    <Navigator @sendMenu="receiver" class = "navigator"></Navigator>
    <!-- 父传子 通过 ：message 向 Content 组件传递数据 -->
    <!-- :message 等价于 v-bind:message 是动态绑定的 Props 属性 -->
    <Content class="content" :message="menu"></Content>
  </div>
</template>

<style scoped>
  .header{
    height: 80px;
    border: 1px solid red;
  }
  .navigator{
    width:15%;
    height: 800px;
    border:1px solid blue;
    float:left
  }
  .content{
    width:83%;
    height: 800px;
    border: 1px solid goldenrod;
    float:right
  }
</style>
